<template>
  <div class="page-container">
    <div class="left-div">
      <left-bar :active-index="tabIndex" :tabs="leftBarTabs" @tab-click="handleTabClick"/>
    </div>
    <div class="right-body">
      <SchedulingPage v-if="tabIndex === 0"/>
      <ForgetViewPage v-if="tabIndex === 1"/>
      <ClassHistory v-if="tabIndex === 2"/>
      <CourseDurationManager v-if="tabIndex === 3"/>
      <StudentProcess v-if="tabIndex === 4"/>
      <UnderDevelopment v-if="tabIndex >= 5"/>
    </div>
  </div>
</template>

<script>

import LeftBar from '@/views/component/leftBar.vue'
import SchedulingPage from '@/views/course/classSchedule/SchedulingPage.vue'
import ForgetViewPage from '@/views/course/forget/ForgetViewPage.vue'
import CourseDurationManager from '@/views/course/classDuration/CourseDurationManager.vue'
import ClassHistory from '@/views/course/classHistory/ClassHistory.vue'
import StudentProcess from '@/views/course/StudentProgress/StudentProcess.vue'
import UnderDevelopment from '@/views/component/UnderDevelopment.vue'

export default {
  name: 'Course',
  components: {
    StudentProcess,
    ClassHistory,
    CourseDurationManager,
    SchedulingPage,
    LeftBar,
    UnderDevelopment,
    ForgetViewPage
  },
  data() {
    return {
      leftBarTabs: [
        { icon: 'fa-solid fa-signature', alt: '排课预约', color: '#a88fd8' },
        { icon: 'fa-solid fa-registered', alt: '抗遗忘', color: '#9763a8' },
        { icon: 'fa-solid fa-list', alt: '上课历史', color: '#6aaed6' },
        { icon: 'fa-solid fa-clock', alt: '课程时长', color: '#7bc47f' },
        { icon: 'fa-solid fa-sliders', alt: '学习进度', color: '#e38fb0' },
        { icon: 'fa-solid fa-spell-check', alt: '作业测评', color: '#f29d72' },
        { icon: 'fa-solid fa-shop', alt: '课程资料库', color: '#f1c75b' }
      ],
      tabIndex: 0
    }
  },
  mounted() {
    const childMenu = this.$route.query.childMenu
    if (childMenu && childMenu >= 0 && childMenu < this.leftBarTabs.length) {
      this.tabIndex = childMenu
    }
  },
  methods: {
    handleTabClick({ index, tab }) {
      this.tabIndex = index
    }
  }
}
</script>
<style scoped>
.page-container {
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: space-between; /* 水平方向居中 */
  height: calc(100vh - 85px);
  /*padding: 20px;*/
  width: 100%;
  box-sizing: border-box;
}

.left-div {
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向居中 */

  width: 100px;
}

.right-body {
  background-color: white;
  width: calc(100% - 110px);
  justify-content: space-between;
  height: 100%;
  border-radius: 16px; /* 圆角 */
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15); /* 阴影 */
  overflow-y: auto; /* ✅ 如果内容超出高度，内部滚动 */
}

/* 自定义滚动条（仅现代浏览器支持） */
.right-body::-webkit-scrollbar {
  width: 0px; /* 滚动条宽度 */
}

.right-body::-webkit-scrollbar-track {
  background: #f5f5f5; /* 滚动条轨道颜色 */
  border-radius: 3px;
}

.right-body::-webkit-scrollbar-thumb {
  background: #ccc; /* 滚动条滑块颜色 */
  border-radius: 3px;
}

.right-body::-webkit-scrollbar-thumb:hover {
  background: #999; /* 滑块hover颜色 */
}
</style>
